<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="true"
      back-icon-name="arrow-leftward"
      title="修改密码"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
		<u-toast ref="uToast" />
    <view class="content">
      <u-form :model="form" ref="uForm" :label-width="150">
        <u-form-item label="新密码">
          <u-input
            v-model="form.newPassword"
            placeholder="新密码"
            type="password"
            :password-icon="true"
          />
        </u-form-item>
        <u-form-item label="确认密码">
          <u-input
            v-model="form.confirmPassword"
            placeholder="请再次输入密码"
            type="password"
            :password-icon="true"
          />
        </u-form-item>
      </u-form>
      <button class="submit" @click="submit">修改</button>
    </view>
  </view>
</template>

<script>
import { updateUser } from '../../api/system/api'
import moment from 'moment';
export default {
  onLoad(option) {
    const { redirect } = option;
    if (redirect) this.redirect = redirect;
  },
  data() {
    return {
      form: {
        newPassword: "",
        confirmPassword: "",
      },
      userInfo: {}
    };
  },
  onLoad() {
    uni.getStorage({     
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
      }
    })
  },
  methods: {
    submit() {
      if (!this.form.newPassword) {
				this.$refs.uToast.show({
					title: '请输入新密码',
					type: 'error',
				})
				return
			}
      if (!this.form.confirmPassword) {
				this.$refs.uToast.show({
					title: '请输入确认密码',
					type: 'error',
				})
				return
			}
      if (this.form.newPassword !== this.form.confirmPassword) {
				this.$refs.uToast.show({
					title: '两次密码不一致',
					type: 'error',
				})
				return
      }
      updateUser({
        ...this.userInfo,
        password: this.form.newPassword
      }).then(res => {
        if (res.code === '200') {
          this.$refs.uToast.show({
            title: '修改成功~',
            type: 'success',
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 500)
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error',
          })
        }
      })

    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;

  .set-icon {
    vertical-align: middle;
    width: 41rpx;
    height: auto;
    margin-right: 35rpx;
  }
}

.content {
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx;
  height: 90vh;
  width: 100%;

  .top {
    width: 100%;
  }

  .logo {
    display: block;
    width: 281rpx;
    height: auto;
    margin: 0 auto 60rpx;
  }

  .cell {
    width: 100%;
    padding: 0 85rpx;
    box-sizing: border-box;
    margin-top: 36rpx;

    .name {
      font-size: 22rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #3e4a59;
      line-height: 30rpx;
      opacity: 0.72;
    }

    .input-box {
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f6f6f6;
      display: flex;
      align-items: center;

      .code {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #0d0d0d;
        line-height: 30rpx;

        text {
          // color: #14b9c8;
          color: #fa3534;
        }
      }

      .ipt {
        flex: 1;
        // height: 24rpx;
        font-size: 24rpx;
      }

      .hold {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #3e4a59;
        line-height: 30px;
        opacity: 0.45;
      }
    }
  }

  .agree {
    margin: 27rpx 95rpx 0;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #cacaca;
    line-height: 34rpx;

    .a {
      color: #000000;
    }
  }

  .submit {
    width: calc(100% - 60rpx);
    margin: 60rpx auto;
    border: none;
    height: 86rpx;
    line-height: 86rpx;
    box-sizing: border-box;
    border-radius: 15rpx;
    background-color: #fa3534;
    color: #ffffff;

    &::after {
      content: none;
    }

    &::before {
      content: none;
    }

    &[disabled="true"] {
      background: #e4e4e4;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .register {
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
  }

  .tip {
    margin-top: 30rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #cacaca;
    line-height: 34rpx;
  }

  .change {
    margin-top: 20rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    // color: #14b9c8;
    color: #fa3534;
    line-height: 34rpx;
  }

  .tag {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #9f9f9f;
    line-height: 34rpx;

    &::before {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }

    &::after {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }
  }

  .chat-arr {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon {
      width: 73rpx;
      height: 73rpx;
    }
  }
}

.register {
  width: 100%;
  text-align: center;
  margin-top: 20rpx;
}
</style>
